<template>
  <div class="dashboard-editor-container" style="overflow-y: hidden">
    <div class="date-panel">
      <div style="margin-left: auto; text-align: right">
        <el-date-picker
          v-model="ctime"
          type="daterange"
          align="right"
          unlink-panels
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handleChange"
        >
        </el-date-picker>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div class="info-panel">
          <div class="info-left">
            <div class="title">接收数据</div>
            <div class="info">
              <span v-text="info.jieshouData || 0"></span>条
            </div>
          </div>
          <img src="../assets/icons/png/jieshou.png" alt="" />
        </div>
      </div>
      <div class="col">
        <div class="info-panel">
          <div class="info-left">
            <div class="title">分发数据</div>
            <div class="info"><span v-text="info.fenfaData || 0"></span>条</div>
          </div>
          <img src="../assets/icons/png/fenfa.png" alt="" />
        </div>
      </div>
      <div class="col">
        <div class="info-panel">
          <div class="info-left">
            <div class="title">处置数据</div>
            <div class="info">
              <span v-text="info.chuzhiData || 0"></span>条
            </div>
          </div>
          <img src="../assets/icons/png/chuzhi.png" alt="" />
        </div>
      </div>
      <div class="col">
        <div class="info-panel">
          <div class="info-left">
            <div class="title">未处置数据</div>
            <div class="info">
              <span v-text="info.noChuzhiData || 0"></span>条
            </div>
          </div>
          <img src="../assets/icons/png/weichuzhi.png" alt="" />
        </div>
      </div>
      <div class="col">
        <div class="info-panel">
          <div class="info-left">
            <div class="title">处置超期数据</div>
            <div class="info">
              <span v-text="info.chuzhiOutTimeData || 0"></span>条
            </div>
          </div>
          <img src="../assets/icons/png/chaoqi.png" alt="" />
        </div>
      </div>
    </div>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="chart-panel">
          <div class="chart-panel-title">舆情类别统计</div>
          <div class="chart-panel-main">
            <PieChart
              v-if="!loading && pieData.length > 0"
              :list="pieData"
            ></PieChart>
            <div class="nodata" v-if="!loading && pieData.length == 0">
              <img src="../assets/image/nodata.png" alt="" />
              <div class="sub">暂无数据</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="chart-panel">
          <div class="chart-panel-title">舆情量排名<span>TOP10</span></div>
          <div class="chart-panel-main">
            <BarChart
              str="舆情量"
              v-if="!loading && yuqingTopX.length > 0"
              :lineDataX="yuqingTopX"
              :lineDataY="yuqingTopY"
            ></BarChart>
            <div class="nodata" v-if="!loading && yuqingTopX.length == 0">
              <img src="../assets/image/nodata.png" alt="" />
              <div class="sub">暂无数据</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12" style="margin-top: 20px">
        <div class="chart-panel">
          <div class="chart-panel-title">处置数量统计</div>
          <div class="chart-panel-main">
            <LineChart
              v-if="!loading && chuzhiX.length > 0"
              :lineDataX="chuzhiX"
              :lineDataY="chuzhiY"
            ></LineChart>
            <div class="nodata" v-if="!loading && chuzhiX.length == 0">
              <img src="../assets/image/nodata.png" alt="" />
              <div class="sub">暂无数据</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12" style="margin-top: 20px">
        <div class="chart-panel">
          <div class="chart-panel-title">处置超期排名<span>TOP10</span></div>
          <div class="chart-panel-main">
            <BarChart
              v-if="!loading && qutTimeX.length > 0"
              str="处置超期量"
              :lineDataX="qutTimeX"
              :lineDataY="qutTimeY"
            ></BarChart>
            <div class="nodata" v-if="!loading && qutTimeX.length == 0">
              <img src="../assets/image/nodata.png" alt="" />
              <div class="sub">暂无数据</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { netDataValue, newDataList } from "@/api/opinion/data";
import PieChart from "./dashboard/PieChartb.vue";
import BarChart from "./dashboard/BarChartb.vue";
import LineChart from "./dashboard/LineChartb.vue";

export default {
  name: "Index",
  components: { PieChart, BarChart, LineChart },
  data() {
    return {
      loading: true,
      ctime: [],
      info: "",
      chuzhiX: [],
      chuzhiY: [],
      qutTimeX: [],
      qutTimeT: [],
      yuqingTopX: [],
      yuqingTopY: [],
      pieData: [],
      beginTime: "",
      endTime: "",
    };
  },
  created() {
    this.initTime();
    this.init();
  },
  methods: {
    initTime() {
      this.beginTime = this.getDay(-7);
      this.endTime = this.getDay(0);
      this.ctime = [this.getDay(-7), this.getDay(0)];
    },
    getDay(aa) {
      let date1 = new Date();
      let date2 = new Date(date1);
      date2.setDate(date1.getDate() + aa);

      let year = date2.getFullYear();
      let month = date2.getMonth() + 1;
      let day = date2.getDate();
      let time2 = year + "-" + (month<10?('0'+month):month) + "-" + (day<10?('0'+day):day);
      return time2;
    },
    handleChange(e) {
      this.beginTime = e[0];
      this.endTime = e[1];
      this.chuzhiX = [];
      this.chuzhiY = [];
      this.qutTimeX = [];
      this.qutTimeT = [];
      this.yuqingTopX = [];
      this.yuqingTopY = [];
      this.pieData = [];
      this.init();
    },
    converArr(arr, key) {
      let list = [];
      let len = arr.length;
      for (let i = 0; i < len; i++) {
        list.push(arr[i][key] || "");
      }
      return list;
    },
    converPie(arr) {
      let list = [];
      let len = arr.length;
      for (let i = 0; i < len; i++) {
        list.push({
          value: arr[i].dataValue,
          name: arr[i].dataName,
        });
      }
      return list;
    },
    init() {
      netDataValue({ beginTime: this.beginTime, endTime: this.endTime }).then(
        (res) => {
          this.info = res.data;
        }
      );
      this.loading = true;
      newDataList({ beginTime: this.beginTime, endTime: this.endTime }).then(
        (res) => {
          this.loading = false;
          let chuzhiData = res.data.chuzhiData;
          let chuzhiOutTimeTop = res.data.chuzhiOutTimeTop;
          let yuqingTop = res.data.yuqingTop;
          let yuqingTypeList = res.data.yuqingTypeList;
          this.chuzhiX = this.converArr(chuzhiData, "dataName");
          this.chuzhiY = this.converArr(chuzhiData, "dataValue");
          this.qutTimeX = this.converArr(chuzhiOutTimeTop, "dataName");
          this.qutTimeY = this.converArr(chuzhiOutTimeTop, "dataValue");
          this.yuqingTopX = this.converArr(yuqingTop, "dataName");
          this.yuqingTopY = this.converArr(yuqingTop, "dataValue");
          this.pieData = this.converPie(yuqingTypeList);
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 20px;

  .date-panel {
    padding: 8px 20px 8px 0;
    margin: -20px -20px 20px -20px;
    height: 52px;
    box-sizing: border-box;
    background-color: #fff;
  }
  .row {
    margin: 0 -10px 20px -10px;
    overflow: hidden;
    .col {
      float: left;
      width: 20%;
      padding: 0 10px;
      box-sizing: border-box;
    }
  }
  .info-panel {
    padding: 16px;
    display: flex;
    align-content: center;
    align-items: center;
    height: 100px;
    background-color: #fff;
    border-radius: 4px;
    box-sizing: border-box;
    .title {
      font-size: 14px;
      color: #666;
    }
    .info {
      margin-top: 5px;
      color: #333;
      font-size: 14px;

      span {
        position: relative;
        top: 6px;
        display: inline-block;
        vertical-align: bottom;
        margin-right: 6px;
        font-size: 30px;
      }
    }
    .info-left {
      flex: 1;
    }
    img {
      display: block;
      width: 60px;
      height: 60px;
    }
  }
  .chart-panel {
    padding: 16px;
    height: 400px;
    box-sizing: border-box;
    background-color: #fff;
    .chart-panel-title {
      font-size: 16px;
      color: #333;
    }
    .chart-panel-main {
      margin-top: 16px;
      width: 100%;
      height: 330px;
    }
    .nodata {
      text-align: center;
      color: #666;
      img {
        margin: 70px auto 10px auto;
        display: block;
      }
    }
  }
}
</style>
